<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref, watch } from 'vue'
  
  // 接收传入的年份
  const props = defineProps({
    year: {
      type: Number,
      required: true
    }
  })
  
  const chartDom = ref()
  let chart
  
  const initChart = (filteredData) => {
    chart = echarts.init(chartDom.value)
    chart.setOption({
        title: {
            text: `季度课时数统计 - ${props.year}年`,
            left: 'center'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            },
            formatter: (params) => {
                const xAxisValue = params[0]?.axisValue; // 获取 x 轴的值 (季度)
                const barInfo = params.find(param => param.seriesType === 'bar'); // 查找柱状图的数据
                return `${xAxisValue}<br/>${barInfo.marker} ${barInfo.seriesName}: ${barInfo.value}`;
            }
        },
        legend: {
            left: 'left'
        },
        xAxis: {
            name: '季度',
            type: 'category',
            data: ['第一季度', '第二季度', '第三季度', '第四季度'], 
            axisLabel: {
            interval: 0,
            }
        },
        yAxis: {
            name: '课时',
            type: 'value'
        },
        toolbox: {
            show: true,
            feature: {
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '课时',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: filteredData.quarterCounts, // 过滤后的数据
                itemStyle: {
                    color: '#28A1FFB3'
                }
            },
            {
                type: 'line',
                data: filteredData.quarterCounts,
                itemStyle: {
                    color: '#28A1FFB3'
                },
                lineStyle: {
                    width: 2,
                },
                symbol: 'circle',
                symbolSize: 8,
            }
        ]
    })
  }
  
  const filterDataByYear = (year) => {
    // 模拟过滤后的季度数据
    const allData = {
        2024: {
            quarterCounts: [470, 572, 591, 682],
        },
        2023: {
            quarterCounts: [603, 518, 509, 556],
        },
        2022: {
            quarterCounts: [435, 498, 552, 526],
        },
        2021: {
            quarterCounts: [369, 636, 532, 529],
        },
        2020: {
            quarterCounts: [421, 637, 469, 532],
        }
    }
  
    return allData[year] || { quarterCounts: [] }
  }
  
  watch(() => props.year, (newYear) => {
    const filteredData = filterDataByYear(newYear)
    initChart(filteredData)
  })
  
  onMounted(() => {
    const filteredData = filterDataByYear(props.year)
    initChart(filteredData)
  })
  </script>
  
  <style scoped>
  /* Add any specific styles here */
  </style>
  